<template>
    <div class="main" style="margin-top: -20px">
      <el-row >
        <!-- 文章列表 -->
        <el-col :span="10" style="margin-left:17%;margin-top: 20px">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" v-for="(d,index) in articleList" :key="index"  style="margin-bottom: 10px">
            <div style="padding-left: 14px;padding-top: 20px;padding-right: 20px">
              <el-link  :underline="false" @click="openArticle(articleList[index])"><span class="article-title" >{{articleList[index].title}}</span></el-link>
              <div class="bottom clearfix" style="margin-top: 10px">
               <span class="article-class" >{{articleList[index].content  | contextFilter}}</span>
<!--                <PureEditor :content="articleList[index].content" class="article-class"></PureEditor>-->
              </div>
            </div>
            <div style="padding-left: 14px;padding-bottom: 20px;padding-top: 13px">
              <el-button type="primary" plain class="like-btn" icon="el-icon-caret-top" size="small">点赞</el-button>
              <el-button type="primary" plain icon="el-icon-caret-bottom" size="small"></el-button>
              <i class="el-icon-s-promotion share" @click="share">分享</i>
              <i class="el-icon-star-on share" @click="collect(articleList[index].id)">收藏</i>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧边栏 -->
        <el-col :span="6" style="margin-top: 10px">
            <SideMenu></SideMenu>
        </el-col>
      </el-row>
    </div>
</template>

<script>
    import PureEditor from "./editor/PureEditor";
    import SideMenu from "./common/SideMenu";
    export default {
        name: "Index",
      components: {SideMenu, PureEditor},
      data() {
        return {
          currentDate: new Date(),
          pageBean:{
            pageNum:1,
            pageSize:20,
            title:""
          },
          articleList:[]
        };
      },
      created() {
          this.fetchData();
      },
      filters:{
        contextFilter(str)
        {
          // const reg = new RegExp("<(.[^>]*)>", 'g');
          // return str.replace(reg,'');
          //除去html标签
          let content = str.replace(/<.+?>/g, '');
          return content;
        }
      },
      methods: {
        share() {
          alert("分享事件")
        },
        collect(val) {
          this.$http.get("http://localhost:8989/fornote/article/collectArticle/"+val).then(response =>{
            if(response.data.code==200)
            {
              this.$message({
                message:response.data.data,
                type:'success'
              })
            }else if(response.data.code==33)
            {
              this.$message({
                message:"文章已收藏",
                type:"warning"
              })
            }else{
              this.$message({
                message:"收藏失败",
                type:"error"
              })
            }
          })
        },
        fetchData()
        {
          this.$http.post("http://localhost:8989/fornote/article/selectArticle",this.pageBean).then(response =>{
            // this.$forceUpdate();
            console.log(response.data);
            this.articleList=response.data.data.list;
            console.log(this.articleList);
          })
        },
        goToArticle()
        {
          this.$router.push({path: "/article"})
        },
        openArticle(val)
        {
          // console.log(val);
          //跳转到文章显示页面
          this.$router.push({path: '/showArticle',query:{ article:val}})
        }
      }
    }
</script>

<style >
  .article-title{
    font-size: 17px;
    font-weight: 800;
  }
  .article-class{
    font-weight: 500;
    font-size: 14px;
    height: 57px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .like-btn{
    font-weight: 600;
    font-size: 13px;
  }
  .share{
    font-size: 13px;
    font-weight: 600;
    margin-left: 20px;
    color: #8590A6;
    cursor: pointer;
  }
  .share:hover{
    color: #0066FF;
  }
  .main{
    background-color: #F6F6F6;
    height: 100%;
  }

</style>
